<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="400"></canvas>

    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Styles
        const line_color = '#000000';
        const fill_color = '#E0E0E0';
        
        // --- Draw Table ---
        ctx.strokeStyle = line_color;
        ctx.lineWidth = 3;
        ctx.beginPath();
        ctx.moveTo(40, 165);
        ctx.lineTo(350, 165);
        ctx.lineTo(350, 350);
        ctx.stroke();

        // --- Draw Pulley ---
        const pulley_center_x = 350;
        const pulley_center_y = 140;
        const pulley_radius = 25;
        
        ctx.lineWidth = 2;
        ctx.beginPath();
        // The pulley in the diagram is centered on the corner but the rope runs over it.
        // Let's adjust the pulley position to match the visual.
        const pulley_visual_center_x = 350;
        const pulley_visual_center_y = 165;
        const pulley_visual_radius = 25;
        
        ctx.beginPath();
        ctx.arc(pulley_visual_center_x, pulley_visual_center_y, pulley_visual_radius, 0, 2 * Math.PI);
        ctx.stroke();


        // --- Draw Block m2 ---
        const block2_w = 80;
        const block2_h = 50;
        const block2_x = 120;
        // String will be at y = pulley_visual_center_y - pulley_visual_radius = 140
        const string_y = 140; 
        const block2_y = string_y - block2_h / 2; // Center the block on the string vertically

        ctx.fillStyle = fill_color;
        ctx.fillRect(block2_x, block2_y, block2_w, block2_h);
        ctx.strokeRect(block2_x, block2_y, block2_w, block2_h);

        // Label for m2
        ctx.fillStyle = line_color;
        ctx.font = 'italic 20px Times New Roman';
        ctx.textAlign = 'left';
        ctx.fillText('m', block2_x + 10, block2_y - 5);
        ctx.font = 'italic 14px Times New Roman';
        ctx.fillText('2', block2_x + 23, block2_y - 2);


        // --- Draw Block m1 ---
        const block1_w = 50;
        const block1_h = 60;
        // String is at x = pulley_visual_center_x + pulley_visual_radius = 375
        const string_x = 375;
        const block1_x = string_x - block1_w / 2;
        const block1_y = 220;
        
        ctx.fillStyle = fill_color;
        ctx.fillRect(block1_x, block1_y, block1_w, block1_h);
        ctx.strokeRect(block1_x, block1_y, block1_w, block1_h);

        // Label for m1
        ctx.fillStyle = line_color;
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('m', block1_x + block1_w + 10, block1_y + 35);
        ctx.font = 'italic 14px Times New Roman';
        ctx.fillText('1', block1_x + block1_w + 23, block1_y + 38);


        // --- Draw String ---
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        // From block m2 to pulley
        ctx.moveTo(block2_x + block2_w, string_y);
        ctx.lineTo(pulley_visual_center_x, string_y);
        // Around pulley
        ctx.arc(pulley_visual_center_x, pulley_visual_center_y, pulley_visual_radius, -Math.PI / 2, 0);
        // From pulley down to block m1
        ctx.lineTo(string_x, block1_y);
        ctx.stroke();

        // --- Draw Text Label ---
        ctx.font = '24px KaiTi'; // A common font for Chinese characters
        ctx.textAlign = 'center';
        ctx.fillText('习题 3-3 图', canvas.width / 2, 380);

    </script>
</body>
</html>